<script setup>
</script>

<template>
  <div class="extremity_box">
    <div class="title wow animate__animated animate__fadeInUp">Resources</div>
    <div class="content">
      <div class="item_content one">
        <div class="sub_title wow animate__animated animate__fadeInUp">Developer Documentation</div>
        <div class="sub_des wow animate__animated animate__fadeInUp">Access Comprehensive Guides And API References</div>
        <div class="ports">
          <div class="item wow animate__animated animate__fadeInUp">Quick start guides for ZKC SDK and Node</div>
          <div class="item wow animate__animated animate__fadeInUp">Detailed API documentation</div>
          <div class="item wow animate__animated animate__fadeInUp">Best practices for developing zk-provable games</div>
        </div>
      </div>
      <div class="item_content two">
        <div class="sub_title wow animate__animated animate__fadeInUp">Tutorials And Examples</div>
        <div class="sub_des wow animate__animated animate__fadeInUp">Learn Through Hands-On Examples</div>
        <div class="ports">
          <div class="item wow animate__animated animate__fadeInUp">Step-by-step tutorials for creating your first ZKCross game</div>
          <div class="item wow animate__animated animate__fadeInUp">Sample projects demonstrating key features</div>
          <div class="item wow animate__animated animate__fadeInUp">Video walkthroughs of advanced concepts</div>
        </div>
      </div>
      <div class="item_content three">
        <div class="sub_title wow animate__animated animate__fadeInUp">Community And Support</div>
        <div class="sub_des wow animate__animated animate__fadeInUp">Join Our Thriving Developer Community</div>
        <div class="ports">
          <div class="item wow animate__animated animate__fadeInUp">Active Discord server for real-time support</div>
          <div class="item wow animate__animated animate__fadeInUp">Regular developer meetups and workshops</div>
          <div class="item wow animate__animated animate__fadeInUp">Bug bounty program for contributing to our ecosystem</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.extremity_box {
  margin-top: 42px;
  .title {
    font-weight: 600;
    font-size: 30px;
    color: #000000;
    padding-left: 5.33%;
  }
  .content {
    margin-top: 23px;
    padding: 5.87% 8%;
    background: #F7F7F7;
    border-radius: 33px;
    border: 1px solid #DEDEDE;
    box-sizing: border-box;
    .item_content {
      padding: 6.35%;
      border-radius: 23px;
      margin-top: 40px;
      &:first-child {
        margin-top: 0px;
      }
      .ports {
        font-weight: 300;
        font-size: 15px;
        color: #0E0E0E;
        line-height: 23px;
        margin-top: 40px;
        .item {
          position: relative;
          padding-left: 20px;
          margin-top: 15px;
          &::before {
            position: absolute;
            content: '';
            background-color: #269AAA;
            width: 7px;
            height: 7px;
            top: 8px;
            left: 0px;
            border-radius: 50%;
          }
        }
      }
    }
    .one {
      background: linear-gradient( 180deg, #D7F6F9 0%, #F7F7F7 93%);
      .sub_title {
        font-weight: 600;
        font-size: 30px;
        color: #269AAA;
        line-height: 36px;
      }
      .sub_des {
        font-weight: 500;
        font-size: 20px;
        color: #0F525C;
        line-height: 24px;
        margin-top: 16px;
      }
    }
    .two {
      background: linear-gradient( 180deg, #DEE2F2 0%, rgba(215,219,238,0) 100%);
      .sub_title {
        font-weight: 600;
        font-size: 30px;
        color: #6E83D8;
        line-height: 36px;
      }
      .sub_des {
        font-weight: 500;
        font-size: 20px;
        color: #253C96;
        line-height: 24px;
        margin-top: 16px;
      }
      .ports {
        .item {
          &::before {
            background-color: #6E83D8;
          }
        }
      }
    }
    .three {
      background: linear-gradient( 180deg, #F0BDBD 0%, rgba(226,83,83,0) 100%);
      .sub_title {
        font-weight: 600;
        font-size: 30px;
        color: #CD5959;
        line-height: 36px;
      }
      .sub_des {
        font-weight: 500;
        font-size: 20px;
        color: #771616;
        line-height: 24px;
        margin-top: 16px;
      }
      .ports {
        .item {
          &::before {
            background-color: #CD5959;
          }
        }
      }
    }
  }
}
</style>
